<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/8
  Time: 9:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件上传</title>
    <script src="./res/jquery-3.5.1.min.js"></script>
    <script src="./res/ajaxfileupload.js"></script>
    <script>
        function check() {
            // 提交表单之前移除 头像这个input元素
            $("#header").attr('type','text');
            // 给头像赋值
            $("#header").val(sessionStorage.getItem("header"));
            // 设置表单提交时的contentType
            $("#form").attr("enctype","application/x-www-form-urlencoded");
            $("#form").attr("encoding","application/x-www-form-urlencoded");
            return true;
        }
    </script>
</head>
<body>
${pageContext.request.contextPath}
<form id="form" action="${pageContext.request.contextPath}/user/register" onsubmit="return check()" method="post"
      multiple enctype="multipart/form-data">
    账号<input type="text" name="account" value="" id="account" autocomplete="off" placeholder="请输入账号"><br>
    密码<input type="text" name="password" value="" id="password" autocomplete="off" placeholder="请输入密码"><br>
    头像<input class="file" type="file" accept="image/*" name="header" value="" id="header" hidden autocomplete="off">
    <button type="button" id="headerBtn">选择头像</button>
    <br>
    <img id="headerImg" src="./res/static/img/person.png" width="150px" >
    <img id="uploadImg" src="./res/static/img/person.png" width="150px" >
    <br>
    <input type="submit" value="提交">
    <p>
    <ul>
        <ol>异步提交头像</ol>
        <ol>
            提交表单之前修改原表单属性
            <ul>
                <li>修改头像标签 type=text</li>
                <li>提交的contentType</li>
            </ul>
        </ol>
    </ul>
    </p>
    <p>
    <ul>
        <ol>存储图像并将存储路径返回给页面</ol>
        <ol>从页面获取图像存储路径并路径存储到数据库中</ol>
    </ul>
    </p>
</form>
</body>
</html>
<script>
    $(function () {
        $('#headerBtn').click(function () {
            // 当选择头像按钮被点击时候 调用头像的input标签单击事件
            $('#header').click();
        });
        // $("#header").live('change', function(){
        $('#header').change(function () {
            // 选择文件后 禁用点按钮
            $('#headerBtn').attr('disabled','true');
            // input标签内容改变的时候执行
            // 获取上传文件中的第一个文件
            let file = this.files[0];
            // 获取该文件的路径(思路一)
            let path = URL.createObjectURL(file);
            window.console.log(path);
            // 将获取到的url赋值给图片
            $('#headerImg').attr("src", path);
            // ajax异步上传图片
            // https://github.com/carlcarl/AjaxFileUpload
            $.ajaxFileUpload({
                method: 'post',
                url: '${pageContext.request.contextPath}/fileupload/qiniuyun',
                fileElementId: 'header',
                xhrFields: {
                    withCredentials: true,
                },
                crossDomain: true,
                cache: false,
                // 不处理数据
                processData: false,
                // 不设置内容类型
                // contentType: 'application/x-www-form-urlencoded; charset=utf-8',
                contentType : false,
                data: {
                    header: file,
                },
                dataType: 'text',
                success: function (result) {
                    let response = JSON.parse(result);
                    if(200 == response.code){
                        $('#uploadImg').attr("src", response.data);
                        // 服务器存储该文件的地址存储在临时存储中
                        sessionStorage.setItem("header",response.data);
                        $('#header').val(response.data);
                    } else {
                        // window.alert("上传图片格式不正确");
                        window.console.log(response.msg);
                    }
                    // 按钮回复可点击状态
                    $('#headerBtn').attr('disabled', 'fasle');
                },
            });
            // 调用IO流将读取到的文件Base64转码(思路二)
        });
    });
</script>
